﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.6.2.min.js"></script>
</head>
<body onload="LoadPic()">
<form id="f1">
<div>
    <input type="button" value="Show" onclick="ShowPic()" />

    <div style="width:780px;height:1000px;border:1px solid #ff6a00">这里是占位区域</div>
    <!--懒加载显示大量图片(核心思想：当用户想看页面某个区域时，再加载该区域的数据)-->
    <div id="picDV" style="border:1px solid #b6ff00">
        
    </div>

    <div id="picDV2" style="border:1px solid #00ffff">

    </div>

</div>

</form>
<script type="text/javascript">
    function LoadPic(){        
        var strPic = "";
        for (var i = 0; i < 10; i++) {
            strPic += "<img data-src='picture/a11.jpg' width='600' height='480' />";
        }
        document.getElementById("picDV").innerHTML = strPic;
        console.info(document.getElementById("picDV"));

        strPic = "";
        for (var i = 0; i < 10; i++) {
            strPic += "<img data-src='picture/aaa.jpg' width='600' height='480' />";
        }
        document.getElementById("picDV2").innerHTML = strPic;
    }

    /*
    lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。
    因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括：
    1.可视区域相对于浏览器顶端位置
    2.待加载资源相对于浏览器顶端位置.
    */    
    function getClient() {  //返回浏览器的可视区域位置  
        var l, t, w, h;
        //设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
        l = document.documentElement.scrollLeft || document.body.scrollLeft;
        //设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
        t = document.documentElement.scrollTop || document.body.scrollTop;
        w = document.documentElement.clientWidth;   //内容可视区域的宽度
        h = document.documentElement.clientHeight;  //内容可视区域的高度
        return { 'left': l, 'top': t, 'width': w, 'height': h };
    }

    //返回待加载资源位置  
    function getSubClient(p) {
        var l = 0, t = 0, w, h;
        w = p.offsetWidth;  //offsetWidth:是元素相对父元素的偏移宽度。等于border+padding+width
        h = p.offsetHeight;

        while (p.offsetParent) {
            l += p.offsetLeft;
            t += p.offsetTop;
            p = p.offsetParent;
        }

        return { 'left': l, 'top': t, 'width': w, 'height': h };
    }

    //要延迟加载的区域放入一个数组，加载完成后就删除元素，避免重复检测
    var d1 = document.getElementById('picDV');
    var d2 = document.getElementById('picDV2');
    var lazyloadArr = [d1, d2];

    function DomCheck() {
        var cObj = getClient(); //可见区域
        for (var i = 0; i < lazyloadArr.length ; i++ ){
            console.info(lazyloadArr);
            var dObj = getSubClient(lazyloadArr[i]);
            if ((cObj.top + cObj.height - 100) > dObj.top) {
                ShowPic(lazyloadArr[i]);
                lazyloadArr.remove(i);  //加载资源后删除检测区域
            }            
        }
       
    }
    //扩展原型方法: 删除数组指定索引的元素
    Array.prototype.remove = function (dx) {
        if (isNaN(dx) || dx > this.length) { return false; }
        for (var i = 0, n = 0; i < this.length; i++) {
            if (this[i] != this[dx]) {
                this[n++] = this[i];
            }
        }
        this.length -= 1;
    }

    window.onscroll = function () {
        DomCheck();
    }

    function ShowPic(obj) {
        var $picDiv = $(obj);   //**DOM对象转成JQ对象  如果是DOM转JQ对象:  var v=$picDiv[0];
        alert("已加载" + $picDiv.attr('id'));
        $picDiv.children("img").each(function (d) {
            var img = $(this).attr('data-src');
            if (img) {
                //把data-src的属性赋值给src并删除data-src，避免重复赋值
                $(this).attr("src", img);
                $(this).removeAttr('data-src');
            }
        });
    }



</script>
</body>
</html>
